import React, { useState } from 'react';
import { Switch, Table, Input, Select, Space, DatePicker, Radio, Tag } from 'antd';
import type { TableColumnsType } from 'antd';
import type { DatePickerProps } from 'antd';
import type { Dayjs } from 'dayjs';

// 定义数据类型接口
interface DataType {
  id: number;
  kehuname: string;
  kehunumber: string;
  kehufenlei: string;
  pricelevel: string;
  xiaoshoufuzeren: string;
}

// 日期选择器的 onChange 处理函数
const onChange: DatePickerProps<Dayjs[]>['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};

// 定义表格列配置
const columns: TableColumnsType<DataType> = [
  {
    title: '',
    dataIndex: '',
    key: 'radio',
    render: () => <Radio />,
  },
  {
    title: '客户名称',
    dataIndex: 'kehuname',
    key: 'kehuname',
    sorter: (a, b) => a.kehuname.localeCompare(b.kehuname), // 添加排序功能
    sortDirections: ['ascend', 'descend'],
  },
  {
    title: '客户编码',
    key: 'kehunumber',
    dataIndex: 'kehunumber',
    sorter: (a, b) => a.kehunumber.localeCompare(b.kehunumber), // 添加排序功能
    sortDirections: ['ascend', 'descend'],
  },
  {
    title: '客户分类',
    dataIndex: 'kehufenlei',
    key: 'kehufenlei',
    render: (_, { kehufenlei }) => {
      const tagColor = {
        SMB: 'yellow',
        ME: 'blue',
        KA: 'green',
      }[kehufenlei] || 'gray';
      return <Tag color={tagColor}>{kehufenlei}</Tag>;
    },
    filters: [
      { text: 'SMB', value: 'SMB' },
      { text: 'ME', value: 'ME' },
      { text: 'KA', value: 'KA' },
    ],
    onFilter: (value, record) => record.kehufenlei === value,
  },
  {
    title: '价格等级',
    dataIndex: 'pricelevel',
    key: 'pricelevel',
    sorter: (a, b) => a.pricelevel.localeCompare(b.pricelevel), // 添加排序功能
    sortDirections: ['ascend', 'descend'],
  },
  {
    title: '销售负责人',
    dataIndex: 'xiaoshoufuzeren',
    key: 'xiaoshoufuzeren',
    sorter: (a, b) => a.xiaoshoufuzeren.localeCompare(b.xiaoshoufuzeren), // 添加排序功能
    sortDirections: ['ascend', 'descend'],
  },
];

// 定义数据源
const dataSource: DataType[] = [
  {
    id: 1,
    kehuname: '帆软软件有限公司',
    kehunumber: 'KH240729-01',
    kehufenlei: 'ME',
    pricelevel: '一级售价',
    xiaoshoufuzeren: '张睿',
  },
  {
    id: 2,
    kehuname: '示例：上海帆软',
    kehunumber: 'KH230424-01',
    kehufenlei: 'KA',
    pricelevel: '二价售价',
    xiaoshoufuzeren: '张睿',
  },
  {
    id: 3,
    kehuname: '示例：杭州帆软',
    kehunumber: 'KH230420-04',
    kehufenlei: 'KA',
    pricelevel: '一级售价',
    xiaoshoufuzeren: '张睿',
  },
  {
    id: 4,
    kehuname: '示例：杭州简道云',
    kehunumber: 'KH230420-03',
    kehufenlei: 'SMB',
    pricelevel: '标准售价',
    xiaoshoufuzeren: '张睿',
  },
  {
    id: 5,
    kehuname: '示例：无锡帆软',
    kehunumber: 'KH230420-02',
    kehufenlei: 'KA',
    pricelevel: '二价售价',
    xiaoshoufuzeren: '张睿',
  },
  {
    id: 6,
    kehuname: '示例：无锡简道云',
    kehunumber: 'KH230420-01',
    kehufenlei: 'ME',
    pricelevel: '二价售价',
    xiaoshoufuzeren: '张睿',
  },
];

const App: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);

  const onSelectChange = (newSelectedRowKeys: number[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    type: 'radio',
  };

  return (
    <Table<DataType>
      style={{ maxWidth: '100%' }}
      columns={columns}
      dataSource={dataSource}
      rowSelection={rowSelection}
      pagination={{ pageSize: 5 }} // 添加分页功能
      scroll={{ x: 1000 }} // 当表格列较多时，支持水平滚动
    />
  );
};

export default App;